<template>
  <!-- 创建退租表单页 -->
  <div class="throwLeasePage">
    <div class="searchBox">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="搜索">
          <el-input
            v-model="searchForm.searchVal"
            placeholder="根据合同名、项目名、承租方名称搜索"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            color="#FF7B50"
            style="color: #fff"
            type="primary"
            size="large"
            @click="doSearch"
            >查看</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      class="throwTabel"
      v-loading="tableLoadingFlag"
      :data="tableState.tableData"
      :header-row-style="{ background: '#F5F5F5' }"
      :header-cell-style="{
        background: 'none',
        padding: '12px 0',
      }"
      tooltip-effect="dark"
      border
      style="width: 100%; margin-bottom: 23px"
    >
      <el-table-column prop="contractName" label="合同名称" align="center">
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" align="center">
      </el-table-column>
      <el-table-column prop="streetName" label="所在街道" align="center">
      </el-table-column>
      <el-table-column prop="leaseCustomerNames" label="承租方" align="center">
      </el-table-column>
      <el-table-column
        prop="leaseTotalArea"
        label="面积(㎡)"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="scope">
          <el-button
            color="#FF7B50"
            size="small"
            style="color: #fff"
            type="primary"
            @click="goThrowLease(scope.row.contractId)"
            >退租</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="defualtPageSize"
      :total="tableState.total"
      :page-sizes="[20, 30, 40, 50, 100, 150, 200]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="tableState.currentPage"
      @current-change="pageChang"
      @size-change="sizeChange"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
} from "element-plus";
import { useRouter } from "vue-router";
import { thorwLeaseApi } from "@/api/coordination";
const router = useRouter();

const searchForm = reactive({
  searchVal: null,
});

// table相关
const defualtPageSize = ref(50);
const tableLoadingFlag = ref(false);
const tableState = reactive({
  tableData: [],
  total: 1, // 总条数
  currentPage: 1, // 当前页
});

const pageChang = (val) => {
  tableState.currentPage = val;
  initTableData();
};
const sizeChange = (val) => {
  defualtPageSize.value = val;
  initTableData();
};

const initTableData = () => {
  let getParams = {
    pageNum: tableState.currentPage,
    pageSize: defualtPageSize.value,
    param: {
      queryName: searchForm.searchVal,
    },
  };
  tableLoadingFlag.value = true;
  thorwLeaseApi.getLeasingContractPage(getParams).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      tableState.total = data.totalSize;
      tableState.tableData = data.content.map((n,i) => {
        n.leaseCustomerNames = ''
        if (n.leaseCustomers) {
          n.leaseCustomers.map((m,j) => {
            if (j == n.leaseCustomers.length - 1) {
              n.leaseCustomerNames += m.customer_name
              return
            }
            n.leaseCustomerNames += m.customer_name + ', '
          })
        }
        return n
      })
      tableLoadingFlag.value = false;
    }
  });
};

const doSearch = () => {
  initTableData();
}

const goThrowLease = (id) => {
  router.push({ path: "/asset/collaborativeApproval/createThrowSteps/" + id });
};

onMounted(() => {
  initTableData();
});
</script>

<style lang="scss" scoped>
.throwLeasePage {
  :deep(.throwTabel) {
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          .cell {
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
